<template>
	<view class="header-bg-image header-bg">
		<view style="height: 50rpx;"></view>
		<view class="padding-30">
			<view class="margin-30-0 flex-around" @click="$tools.navigateBack()">
				<u-icon name="arrow-left" color="#333333" size="20"></u-icon>
				<view class="fontSize-18 color-000 flex1 text-center">购物车订单详情</view>
				<view style="width: 40rpx;"></view>
			</view>
			<view class="margin-bottom30" v-if="order_status == 1">
				<view class="fontSize-20 color-000 fontWeight-bold margin-bottom30">订单待支付</view>
				<view class="fontSize-15 color-000">订单已提交，请尽快支付哦~</view>
			</view>
			<view class="margin-bottom30" v-if="order_status == 2">
				<view class="fontSize-20 color-000 fontWeight-bold margin-bottom30">订单待发货</view>
				<view class="fontSize-15 color-000">商家已收到您的订单，会尽快给您发货哦~</view>
			</view>
			<view class="margin-bottom30" v-if="order_status == 3">
				<view class="fontSize-20 color-000 fontWeight-bold margin-bottom30">订单已发货</view>
				<view class="fontSize-15 color-000">您的商品正在途中，请耐心等待哦~</view>
			</view>
			<view class="margin-bottom30" v-if="order_status == 4">
				<view class="fontSize-20 color-000 fontWeight-bold margin-bottom30">订单已完成</view>
				<view class="fontSize-15 color-000">您的订单已完成，有问题联系客服哦~</view>
			</view>

			<view class="padding-30 border-radius20 bg-fff margin-bottom30">
				<view class="flex-alignItems-center">
					<view class="margin-right20">
						<u-icon name="map" color="#000000" size="16"></u-icon>
					</view>
					<view class="fontSize-16 color-000 margin-right20">{{address.name}}</view>
					<view class="fontSize-16 color-000">{{address.mobile}}</view>
				</view>
				<view class="fontSize-13 color-999 margin-top20">
					{{address.area}}{{address.address}}
				</view>
			</view>

			<view class="bg-fff border-radius20 flex padding-30  margin-bottom30" v-for="(item,index) in goodsList" :key="index">
				<image class="img-160 border-radius10 margin-right20" :src="item.goods.image" mode="">
				</image>
				<view class="flex1">
					<view class="flex-between margin-bottom10">
						<view class="fontSize-15 color-000 margin-right20">{{item.goods.title}}</view>
						<view class="fontSize-15 color-FE3232" v-if="item.status == 1" style="flex-shrink: 0;">
							待支付</view>
						<view class="fontSize-15 color-2EA5F5" v-if="item.status == 2" style="flex-shrink: 0;">
							待发货</view>
						<view class="fontSize-15 color-2EA5F5" v-if="item.status == 3" style="flex-shrink: 0;">
							待收货</view>
						<view class="fontSize-15 color-4D4D4D" v-if="item.status == 4" style="flex-shrink: 0;">
							已完成</view>
					</view>
					<!-- 规格循环 -->
					<block v-for="(v,i) in item.cart" :key="i">
						<view class="fontSize-15 color-999 margin-bottom10" >
						    {{v.item_name?v.item_name:''}}
						</view>
						<template v-if="item.goods_type ==2">
							<view class="flex-between">
								<view style="color: #C90F0F;">
									<text class="fontSize-15">积分</text>
									<text class="fontSize-20">{{v.score}}</text>
								</view>
								<view>x {{v.count}}</view>
							</view>
						</template>
						<template v-else>
							<view class="flex-between">
								<view style="color: #C90F0F;">
									<text class="fontSize-15">￥</text>
									<text class="fontSize-20">{{v.price}}</text>
								</view>
								<view>x {{v.count}}</view>
							</view>
						</template>
					</block>
				</view>
			</view>
			
			<template v-if="order_type == 2">
				<view class="bg-fff border-radius20 flex-column padding-30 margin-bottom30">
					<view class="flex-between margin-bottom30 flex1">
						<view class="fontSize-15" style="color: #4D4D4D;">商品积分</view>
						<view class="">{{total_score}}</view>
					</view>
					<view class="flex-between flex1">
						<view class="fontSize-15" style="color: #4D4D4D;">总计积分</view>
						<view class="">{{total_score}}</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="bg-fff border-radius20 flex-column padding-30 margin-bottom30">
					<view class="flex-between margin-bottom30 flex1">
						<view class="fontSize-15" style="color: #4D4D4D;">商品总金额</view>
						<view class="">￥{{order_amount_total}}</view>
					</view>
					<!-- <view class="flex-between margin-bottom30 flex1">
						<view class="fontSize-15" style="color: #4D4D4D;">配送费用</view>
						<view class="">￥{{orderDetail.delivery_money}}</view>
					</view> -->
					<view class="flex-between flex1">
						<view class="fontSize-15" style="color: #4D4D4D;">总计实付</view>
						<view class="">￥{{order_amount_total}}</view>
					</view>
				</view>
			</template>

			<!-- <view class="bg-fff border-radius20 flex-column padding-30 margin-bottom30">
				<view class="fontSize-18 color-000 margin-bottom30">留言</view>
				<view class="fontSize-15 color-000">
					{{orderDetail.remark}}
				</view>
			</view> -->

			<view class="bg-fff border-radius20 flex-column padding-30 margin-bottom30">
				<view class="flex-between margin-bottom30 flex1">
					<view class="fontSize-15" style="color: #4D4D4D;">订单编号</view>
					<view class="">{{order_no}}</view>
				</view>
				<!-- <view class="flex-between margin-bottom30 flex1">
					<view class="fontSize-15" style="color: #4D4D4D;">下单时间</view>
					<view class="">{{orderDetail.createtime}}</view>
				</view> -->
				<view class="flex-between flex1" v-if="payTime">
					<view class="fontSize-15" style="color: #4D4D4D;">支付时间</view>
					<view class="">{{payTime}}</view>
				</view>
			</view>
			<!-- 底部操作栏 -->
			<view style="height: 200rpx;"></view>
			<view class="position-fixed-100bottom" v-if="order_status ==1&&chooseTabIndex == 0">
				<view class="flex-between bg-fff padding-30">
					<u-icon name="kefu-ermai" color="#333333" size="28"></u-icon>
					<view class="flex-alignItems-center">
						<view class="shop-buys-btn1 flex-center margin-right20" @click="cancelOrder(order_no)">取消订单
						</view>
						<view class="shop-buys-btn flex-center" @click="payBuy(order_no)">立即购买</view>
					</view>
				</view>
			</view>
			<view class="position-fixed-100bottom" v-if="order_status ==1&&chooseTabIndex == 1">
				<view class="flex-between bg-fff padding-30">
					<u-icon name="kefu-ermai" color="#333333" size="28"></u-icon>
					<view class="flex-alignItems-center">
						<view class="shop-buys-btn1 flex-center margin-right20" @click="cancelOrder(order_no)">取消订单
						</view>
						<view class="shop-buys-btn flex-center" @click="integralPopupShow = true">立即购买</view>
					</view>
				</view>
			</view>
			<view class="position-fixed-100bottom" v-if="order_status ==3">
				<view class="flex-between bg-fff padding-30">
					<u-icon name="kefu-ermai" color="#333333" size="28"></u-icon>
					<view class="shop-buys-btn flex-center" @click="confirmOrder(order_no)">确认收货</view>
				</view>
			</view>
			<view class="position-fixed-100bottom" v-if="order_status ==0">
				<view class="flex-between bg-fff padding-30">
					<u-icon name="kefu-ermai" color="#333333" size="28"></u-icon>
					<view class="shop-buys-btn flex-center" @click="deleteOrder(order_no)">删除订单</view>
				</view>
			</view>
			<view class="position-fixed-94bottom bg-fff padding-20 flex-between"
				v-if="order_status ==2||order_status ==4">
				<view class="kefu-btn flex-center flex1">
					<u-icon name="kefu-ermai" color="#704234" size="28"></u-icon>
					<view class="fontSize-15 color-704234 margin-left20">联系客服</view>
				</view>
			</view>
		</view>
		

		<!-- 积分不足弹窗 -->
		<!-- 积分弹窗 -->
		<u-popup :show="integralPopupShow" @close="integralPopupShow = false" :closeable="true">
			<view class="popup-view">
				<view class="fontSize-16 color-000 margin-bottom30 fontWeight-bold">选择支付方式</view>
				<view style="height: 50rpx;"></view>
			<!-- 	<view class="flex-between margin-bottom30">
					<view class="flex-alignItems-center">
						<image class="img-44 margin-right20" src="../../../static/image/12.png" mode=""></image>
						<view class="fontSize-15 color-000">微信支付</view>
					</view>
					<view @click="choosePay('微信支付')">
						<image class="img-32" v-if="choosePayName == '微信支付'" src="../../../static/image/14.png"
							mode="widthFix"></image>
						<image class="img-32" v-else src="../../../static/image/15.png" mode="widthFix"></image>
					</view>
				</view> -->
				<view class="flex-between margin-bottom30">
					<view class="flex-alignItems-center">
						<image class="img-44 margin-right20" src="../../../static/image/13.png" mode=""></image>
						<view class="fontSize-15 color-000">积分支付({{userinfo.score}})</view>
					</view>
					<view @click="choosePay('积分支付')">
						<image class="img-32" v-if="choosePayName == '积分支付'" src="../../../static/image/14.png"
							mode="widthFix"></image>
						<image class="img-32" v-else src="../../../static/image/15.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="padding-30 margin-top50">
					<view class="btn-967C5E-15ffffff flex-center" @click="confrimPay(order_no)">
						确定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1: '',
				order_no: '',
				orderDetail: {},
				address: {},
				goods: {},
				// 规格价格
				sku_price: '',
				// 正常商品和积分商品状态
				chooseTabIndex: '',
				// 选择支付方式
				choosePayName: '积分支付',
				integralPopupShow: false,
				// 用户信息
				userinfo: {},
				// 支付时间
				payTime:'',
				// 订单商品列表
				goodsList:[],
				// 支付总积分
				total_score:'',
				// 支付总金额
				order_amount_total:'',
				// 订单状态
				order_status:'',
				// 订单type
				order_type:''
			}
		},
		onLoad(e) {
			this.chooseTabIndex = e.code
			if (uni.getStorageSync('token')) {
				this.getUserInfo()
				// this.getOrderDetail(e.order_no)
				this.getCartOrderDetail(e.order_no)
			}
			if(e.order_no){
				this.order_no = e.order_no
			}
			if(e.order_type){
				this.order_type = e.order_type
			}
			if(e.order_status){
				this.order_status = e.order_status
			}
		},
		computed: {
			allPrice() {
				let totalPrice = ((Number(this.orderDetail.order_amount_total) + Number(this.orderDetail.delivery_money)))
					.toFixed(2)
				totalPrice = totalPrice > 0 ? totalPrice : 0.00
				return totalPrice
			}
		},
		methods: {
			// 时间戳转化时间格式
			formateDate(datetime) {
				function addDateZero(num) {
					return num < 10 ? "0" + num : num;
				}
				let d = new Date(datetime);
				let formatdatetime =
					d.getFullYear() +
					"-" +
					addDateZero(d.getMonth() + 1) +
					"-" +
					addDateZero(d.getDate()) +
					" " +
					addDateZero(d.getHours()) +
					":" +
					addDateZero(d.getMinutes()) +
					":" +
					addDateZero(d.getSeconds());
				return formatdatetime;
			},
			timeFormat(value) {
				// console.log(this.formateDate())
				let year = new Date(value).getFullYear();
				let month = new Date(value).getMonth() + 1;
				let date = new Date(value).getDate();
				let hour = new Date(value).getHours();
				let minute = new Date(value).getMinutes();
				let second = new Date(value).getSeconds();
				let time = this.formateDate(
					year + "/" + month + "/" + date + " " + hour + ":" + minute + ":" + second
				)
				// let time = new Date().formateDate(
				//   year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second
				// );
				return time;
			},
			// 获取用户信息
			async getUserInfo() {
				let res = await this.$http.post(this.$api.user_info, {}, {
					token: true
				})
				if (res.code == 1) {
					this.userinfo = res.data
				}
			},
			// 选择支付方式
			choosePay(value) {
				this.choosePayName = value
			},
			// 支付
			async confrimPay(order_no) {
				let pay_type = 2
				let res = await this.$http.post(this.$api.pay, {
					order_no: order_no,
					pay_type: pay_type
				}, {
					token: true
				})
				
				if(res.code ==1){
					this.$tools.toast('支付成功')
					this.$tools.redirectTo('/pages/mine/order-list/order-list', 200)
					this.isSubmit = true
				}else{
					this.$tools.toast('支付失败')
					this.$tools.redirectTo('/pages/mine/order-list/order-list', 200)
					this.isSubmit = true
				}
			},
			// 确认收货
			async confirmOrder(order_no) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否确认收货',
					success: function(res) {
						if (res.confirm) {
							that.$http.post(that.$api.order_confirm, {
								order_no: order_no
							}).then(res => {
								if (res.code == 1) {
									uni.showToast({
										title: '确认收货',
										icon: 'none'
									})
									that.$tools.navigateBack(1, 200)
								}
							})
						} else if (res.cancel) {
							uni.showToast({
								title: '取消确认收货',
								icon: 'none'
							})
						}
					}
				});
			},
			// 删除订单
			async deleteOrder(order_no) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否删除订单',
					success: function(res) {
						if (res.confirm) {
							that.$http.post(that.$api.order_del, {
								order_no: order_no
							}).then(res => {
								if (res.code == 1) {
									uni.showToast({
										title: '删除成功',
										icon: 'none'
									})
									that.$tools.navigateBack(1, 200)
								}
							})
						} else if (res.cancel) {
							uni.showToast({
								title: '取消删除',
								icon: 'none'
							})
						}
					}
				});
			},
			// 取消订单
			async cancelOrder(order_no) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否取消订单',
					success: function(res) {
						if (res.confirm) {
							that.$http.post(that.$api.order_cancel, {
								order_no: order_no
							}).then(res => {
								if (res.code == 1) {
									uni.showToast({
										title: '取消成功',
										icon: 'none'
									})
									that.$tools.navigateBack(1, 200)
								}
							})
						} else if (res.cancel) {
							uni.showToast({
								title: '取消失败',
								icon: 'none'
							})
						}
					}
				});
			},
			// 立即购买
			async payBuy(order_no) {
				// let res = await this.$http.post(this.$api.pay, {
				// 	order_no: order_no,
				// 	pay_type: 1
				// }, {
				// 	token: true
				// })
				// 测试
				let res = await this.$http.post(this.$api.order_test,{order_no:order_no},{token:true})
				this.$tools.toast('支付成功')
				this.$tools.navigateBack(1, 200)
			},
			// 获取规格价格
			async getGoodItemPrice() {
				let res = await this.$http.post(this.$api.goods_item_price, {
					goods_id: this.orderDetail.goods_id,
					spu_id: this.orderDetail.item_id
				}, {
					token: true
				})
				console.log(res)
				if (res.code == 1) {
					this.sku_price = res.data.price
				}
			},
			// 获取订单详情
			// getOrderDetail(order_no) {
			// 	this.$http.post(this.$api.order_detail, {
			// 		order_no: order_no
			// 	}, {
			// 		token: true
			// 	}).then(res => {
			// 		console.log(res)
			// 		if (res.code == 1) {
			// 			this.orderDetail = res.data
			// 			this.address = res.data.address
			// 			this.goods = res.data.goods
			// 			this.payTime = this.timeFormat(res.data.pay_time*1000)
			// 			this.getGoodItemPrice()
			// 		}
			// 	})
			// },
			getCartOrderDetail(order_no) {
				this.$http.post(this.$api.cart_order_detail, {
					order_no: order_no
				}, {
					token: true
				}).then(res => {
					console.log(res)
					if(res.code == 1){
						this.address = res.data.address
						this.goodsList = res.data.list
						this.total_score = res.data.total_score
						this.order_amount_total = res.data.order_amount_total
						// this.payTime =  this.timeFormat(res.time*1000)
						// console.log(this.payTime)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.kefu-btn {
		width: 690rpx;
		height: 90rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #704234;
		background: rgba(150, 124, 94, 0.18);
		border: 1rpx solid #967C5E;
		border-radius: 60rpx;
	}

	.shop-buys-btn1 {
		width: 240rpx;
		height: 80rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #704234;
		background: rgba(150, 124, 94, 0.18);
		border: 1rpx solid #967C5E;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}

	.shop-buys-btn {
		width: 240rpx;
		height: 80rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		background: #967C5E;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}
</style>